<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        *{
            margin: 20px auto;
        }
        #message{
            width: 400px;
            text-align: center;
        }
        caption{
            font-size:larger;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <table id="message">
        <caption>用户信息</caption>
        <tr>
            <th>序号</th>
            <th>账号</th>
            <th>姓名</th>
            <th>身份</th>
        </tr>
    </table>
    <script>
        $.ajax({
            url:'http://localhost:8080/demo/MessageServlet',
            method:'get',
            dataType:'json',
            success:function(res){
                res.message.forEach(item=>{
                    var tr=`<tr>
                        <td>${item.num}</td>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.postion}</td>
                        </tr>`
                    $("#message").append(tr)
                })
                 
            }
        })
    </script>
</body>
</html>